import React from 'react';
import { Breadcrumb, Dropdown, Menu } from 'antd';
import { DownOutlined } from '@ant-design/icons';

const CustomBreadcrumb = ({ items }) => {
  const renderDropdownMenu = dropdownMenu => {
    return (
      <Menu>
        {dropdownMenu.map((menu, index) => (
          <Menu.Item key={index}>
            <a href={menu.link} target="_blank">
              {menu.title}
            </a>
          </Menu.Item>
        ))}
      </Menu>
    );
  };

  const renderBreadcrumbItems = () => {
    return items.map((item, index) => (
      <Breadcrumb.Item key={index}>
        {item.dropdownMenu ? (
          <Dropdown overlay={renderDropdownMenu(item.dropdownMenu)}>
            <a
              className="ant-dropdown-link"
              href="/#"
              onClick={e => e.preventDefault()}
            >
              {item.title} <DownOutlined />
            </a>
          </Dropdown>
        ) : (
          <a href={item.link} target="_blank">
            {item.title}
          </a>
        )}
      </Breadcrumb.Item>
    ));
  };

  return <Breadcrumb>{renderBreadcrumbItems()}</Breadcrumb>;
};

export default CustomBreadcrumb;
